<template>
  <FModal ref="refFModal" :loading="loading"
          width="960" bodyHeight="500" :header="header" @ok="doRemoveUserSign">
    <template #contentHeader>
      <FUploader ref="refFUploader"/>
      <el-select collapse-tags multiple v-model="selectedUsers" filterable
                 placeholder="请选择减签用户" style="margin-bottom: 10px">
        <el-option v-for="item in flowUserList" :key="item.id"
                   :label="item.realname" :value="item.id"/>
      </el-select>
    </template>
    <froala id="edit" :tag="'textarea'" placeholder="请输入评论" :config="froalaConfig"
            v-model:value="comment"></froala>
  </FModal>
</template>
<script setup>
import FModal from '@/components/FModal/index.vue';
import {computed, nextTick, shallowRef, unref} from 'vue';
import FUploader from '@/components/FUploader/index.vue';
import {froalaConfig} from '@/components/MyFroala';
import {isEmpty} from '@/utils/CommonUtils';
import {ElMessage} from 'element-plus';
import {getAction, postAction} from '@/request/BaseRequest';

defineOptions({
  name: 'RemoveUserSignComponent'
});

const refUserSelectorModal = shallowRef();
const comment = shallowRef();
const refFUploader = shallowRef();
const refFModal = shallowRef();
const userConfigs = shallowRef();
const loading = shallowRef();
const flowUserList = shallowRef([]);
const selectedUsers = shallowRef([]);

const props = defineProps({
  userTask: undefined,
});

const emits = defineEmits(['addUserSignOk']);

function setData() {
  loadUserList().then(() => {
    refFModal.value.open();
    nextTick(() => {
      userConfigs.value = undefined;
      comment.value = undefined;
      refFUploader.value.setData('');
    });
  });
}

function loadUserList() {
  return new Promise((success, err) => {
    loading.value = true;
    getAction('/flow/queryRemoveAbleUserSigns', {userTaskId: props.userTask.id}).then(data => {
      loading.value = false;
      if (data.success) {
        let result = data.result;
        if (setUserList(result)) {
          success();
        }
      }
    });
  });
}

function setUserList(list) {
  if (isEmpty(list)) {
    list = [];
  }
  flowUserList.value = list;
  if (isEmpty(list)) {
    ElMessage({
      showClose: true,
      message: '当前节点没有可以减签的用户',
      type: 'warning',
    });
    return false;
  }

  return true;
}

defineExpose({
  setData
});

function doRemoveUserSign() {
  if (isEmpty(selectedUsers.value)) {
    ElMessage({
      message: '请选择需要减签的用户',
      type: 'warning',
    });
    return;
  }
  loading.value = true;
  let ids = unref(selectedUsers);
  let names = ids.map(id => {
    return flowUserList.value.find(user => user.id === id).realname;
  });
  let data = {
    userIds: ids.toString(),
    userNames: names.toString(),
    comment: unref(comment),
    attachmentIds: refFUploader.value.getAttachmentIds(),
    userTaskId: props.userTask.id,
    commentAction: 'removeUserSign',
    commentActionInfo: '减签'
  };
  postAction('/flow/removeUserSigns', data).then(data => {
    loading.value = false;
    if (data.success) {
      // refFModal.value.close();
      ElMessage({
        message: '减签成功',
        type: 'success',
      });
      emits('addUserSignOk');
      refFModal.value.close();
    }
  });
}

const header = computed(() => {
  return `减签节点: ${props.userTask.taskName}`;
});
</script>
<style>
.f-modal-small-body .add-user-sign-body {
  height: 600px;
  overflow: auto;
}

.f-modal-fullscreen-body .add-user-sign-body {
  height: 100%;
  overflow: auto;
}
</style>
